/* eslint-disable import/extensions */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-plusplus */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable no-console */
/* eslint-disable react/prop-types */
/* eslint-disable global-require */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable prettier/prettier */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable no-empty */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable promise/catch-or-return */
/* eslint-disable promise/always-return */
/* eslint-disable eqeqeq */
/* eslint-disable no-nested-ternary */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable no-undef */
/* eslint-disable no-alert */
import { Button, IconButton, LinearProgress } from '@mui/material';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import {
  ClockCircleFilled,
  ArrowDownOutlined,
  EyeFilled,
  PlayCircleOutlined,
  PlusCircleFilled,
  SearchOutlined,
  DeleteFilled,
  GithubFilled,
  ArrowLeftOutlined,
  CheckCircleFilled,
  MinusCircleFilled,
  EditFilled,
  CloseCircleFilled,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  RedoOutlined,
} from '@ant-design/icons';
import IconFont from '@/renderer/components/IconFont';
import Typography from '@mui/material/Typography';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAsyncEffect, useRequest } from 'ahooks';
import { useIdb } from 'react-use-idb';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';
import Divider from '@mui/material/Divider';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import Modal from '@/renderer/components/Modal';
import UploadFile from '@/renderer/components/UploadAvatar';
import TextField from '@mui/material/TextField';
import 'react-photo-view/dist/react-photo-view.css';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Grid from '@mui/material/Grid';
import dayjs from 'dayjs';
import Popover from '@mui/material/Popover';
import { green, red } from '@mui/material/colors';
import { ipcRenderer } from 'electron';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import dirTree from 'directory-tree';
import Tree from '@/renderer/components/Tree';
import fs from 'fs';
import { Scrollbars } from 'react-custom-scrollbars';
import TabIcons from '@/renderer/components/TabIcons';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import Alert from '@mui/material/Alert';
import LoadingButton from '@mui/lab/LoadingButton';
import { change } from '@/renderer/store/snackbar';
import { useDispatch } from 'react-redux';
import * as template from '@/renderer/utils/template';
import Editcroboard from './editcroboard';

// tree遍历
function treeForeach(tree, func) {
  tree.forEach((data) => {
    func(data);
    data.routes && treeForeach(data.routes, func); // 遍历子树
  });
}

// 删除文件夹下的所有目录
function delDir(path) {
  let files = [];
  if (fs.existsSync(path)) {
    files = fs.readdirSync(path);
    files.forEach((file, index) => {
      const curPath = `${path}/${file}`;
      if (fs.statSync(curPath).isDirectory()) {
        delDir(curPath); // 递归删除文件夹
      } else {
        fs.unlinkSync(curPath); // 删除文件
      }
    });
    fs.rmdirSync(path);
  }
}

// 添加节点
const addNext = (path, node, addon) => {
  for (let i = 0; i < node.length; i++) {
    if (node[i].path === path) {
      if (!node[i].routes) {
        node[i].routes = [];
      }
      node[i].routes.push(addon);
      break;
    } else if (node[i].routes) {
      addNext(path, node[i].routes, addon);
    }
  }
};

// 删除节点
const removeNodeInTree = (treeList, path) => {
  // 通过id从数组（树结构）中移除元素
  if (!treeList || !treeList.length) {
    return;
  }
  for (let i = 0; i < treeList.length; i++) {
    if (treeList[i].path === path) {
      treeList.splice(i, 1);
      break;
    }
    removeNodeInTree(treeList[i].routes, path);
  }
};

// 更新节点
const updateNodeInTree = (treeList, path, obj) => {
  if (!treeList || !treeList.length) {
    return;
  }
  for (let i = 0; i < treeList.length; i++) {
    if (treeList[i].path == path) {
      treeList[i] = obj;
      break;
    }
    updateNodeInTree(treeList[i].routes, path, obj);
  }
};

function ProjectSetting({arg}) {
  const dispatch = useDispatch();
  const { state } = useLocation();
  const navigate = useNavigate();
  const [id, setid] = useState(); // 设置当前项目的id
  const [active, setactive] = useState(0); // 设置显示类型
  const [curpage, setcurpage] = useState('');
  const [modalprops, setmodal] = useState({
    open: false,
    reload: false,
  });
  const [defaultvalues, setdefaultvalues] = useState({
    name: '',
    type: '1',
    icon: '',
    path: '',
  });
  const [popover, setpopover] = useState({
    open: false,
    anchorEl: null,
    onClose: () => {
      setpopover((s) => ({ ...s, open: false }));
    },
  });
  const [collspan, setcollspan] = useState(false);
  const [localPath, setlocalPath] = useState(null); // 项目路径
  const [filelist, setfilelist] = useState(null); // 文件树结构
  const [filedata, setfiledata] = useState('');
  const [value, setValue] = useIdb('projects');

  // list
  const projectlist = useMemo(() => {
    const res = value ?? [];
    if (id) return res;
    if (!state?.id) {
      setid(res?.[0]?.id);
    } else {
      setid(state?.id);
    }
    return res;
  }, [value, state?.id]);

  // curdata
  const data = useMemo(() => {
    return value ? value?.filter((it) => it.id == id)?.[0] : {};
  }, [value, id]);

  // 获取项目文件
  function getFileList(path) {
    if (path) {
      const tree = dirTree(path, {
        attributes: ['size', 'type', 'extension'],
        exclude: /node_modules/,
      });
      setfilelist(tree?.children);
    }
  }

  // 获取路由配置
  function getFileRoutes(path) {
    const filename = 'route.jsx';
    if (!path) return;

    fs.readFile(`${path}/config/authRoutes.js`, 'utf8', (err, data) => {
      if (err) {
        setfilelist('error');
        return;
      }
      if (data) {
        const re = /{[\S\s]*}/;
        const match = data.match(re);
        try {
          console.log(`[${match[0]}]`);
          const resdata = JSON.parse(`[${match[0]}]`);
          setfilelist(resdata);
        } catch (error) {
          console.log(error);
          dispatch(
            change({
              open: true,
              message: 'authRoutes对象需以JSON格式编写!',
              severity: 'error',
            })
          );
        }
      }
    });
  }

  useEffect(() => {
    const path = localStorage.getItem(data?.project_name) ?? null;
    setlocalPath(path);
    if (active == 0 && data?.project_name) {
      getFileRoutes(path);
    } else if (active == 1) {
      getFileList(path);
    }
  }, [data?.project_name, active]);

  // 新增/修改页面
  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const name = data.get('name');
    let type = data.get('type');
    const icon = data.get('icon');
    const path = data.get('path');
    if (!type) {
      if (modalprops?.curitem?.component) {
        type = 1;
      } else {
        type = 2;
      }
    }

    const dif =
      type == '1'
        ? {
            component: `./${path}`,
          }
        : {
            routes: [],
          };

    const additem = {
      name,
      path: `/${path}`,
      icon,
      ...dif,
    };
    let filelists = [];
    let curpages = {};
    if (modalprops?.title == '新增') {
      curpages = additem;
      const allarr = [];
      treeForeach(filelist, (node) => {
        allarr.push(node.path);
      });
      if (allarr.includes(`/${path}`)) {
        dispatch(
          change({
            open: true,
            message: '已存在的页面!',
            severity: 'error',
          })
        );
        return;
      }
      if (modalprops?.curitem?.path) {
        await setfilelist((s) => {
          const news = JSON.parse(JSON.stringify(s));
          addNext(modalprops?.curitem?.path, news, additem);
          filelists = news;
          return news;
        });
      } else {
        await setfilelist((s) => {
          filelists = [...s, additem];
          return [...s, additem];
        });
      }
    } else {
      const edititem = {
        ...modalprops?.curitem,
        ...additem,
        routes: modalprops?.curitem?.routes ?? [],
      };
      if (edititem.component) {
        curpages = edititem;
        delete edititem.routes;
      }
      await setfilelist((s) => {
        const news = JSON.parse(JSON.stringify(s));
        updateNodeInTree(news, modalprops?.curitem?.path, edititem);
        filelists = news;
        return news;
      });
    }

    // 更新页面文件
    const filestr = `export default ${JSON.stringify(filelists, null, '\t')};`;
    await fs.writeFileSync(
      `${localPath}/config/authRoutes.js`,
      filestr,
      'utf8',
      (err) => {
        if (err) {
          dispatch(
            change({
              open: true,
              message: '文件写入失败!',
              severity: 'error',
            })
          );
        } else {
          dispatch(
            change({
              open: true,
              message: '文件写入成功!',
              severity: 'success',
            })
          );
        }
      }
    );
    if (path == modalprops?.curitem?.path) return;
    /* 创建文件 */
    const comparr = path.split('/');
    const tmp = comparr[comparr.length - 1];
    const compName = tmp.charAt(0).toUpperCase() + tmp.slice(1);

    const filestrs = template.tablecrud(name, compName);
    const addfolder = `${localPath}/src/pages/${path}`;
    const hasfolder = fs.existsSync(addfolder);
    if (!hasfolder) {
      fs.mkdirSync(addfolder);
    }
    if (type == '2') return; // 创建文件夹则不创建index文件
    await fs.writeFileSync(
      `${addfolder}/index.jsx`,
      filestrs,
      'utf8',
      (err) => {
        if (err) {
          dispatch(
            change({
              open: true,
              message: 'index.jsx写入失败!',
              severity: 'error',
            })
          );
        } else {
          dispatch(
            change({
              open: true,
              message: 'index.jsx写入成功!',
              severity: 'success',
            })
          );
        }
      }
    );
    await fs.writeFileSync(
      `${addfolder}/columns.js`,
      template.columns,
      'utf8',
      (err) => {
        if (err) {
          dispatch(
            change({
              open: true,
              message: 'columns写入失败!',
              severity: 'error',
            })
          );
        } else {
          dispatch(
            change({
              open: true,
              message: 'columns写入成功!',
              severity: 'success',
            })
          );
        }
      }
    );
    setcurpage(curpages);

    /* */
    setmodal((s) => ({
      ...s,
      open: false,
    }));
  };


  return (
    <div
      style={{
        width: '100%',
        position: 'absolute',
        height: '100%',
      }}
    >
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={id}
          onChange={(e, v) => {
            setactive(0);
            setid(v);
          }}
          aria-label="basic tabs example"
          variant="scrollable"
          scrollButtons="auto"
          selectionFollowsFocus
        >
          {projectlist?.map?.((it, i) => {
            return <Tab label={it.project_name} value={it.id} />;
          })}
        </Tabs>
      </Box>

      <PhotoProvider>
        <div style={{ margin: 12 }}>
          <div
            className="centerl"
            style={{
              marginBottom: 12,
              justifyContent: 'space-between',
              userSelect: 'none',
              cursor: 'pointer',
            }}
          >
            <div className="centerl">
              <img
                src={data && data?.logo_url}
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: '6px',
                  marginRight: 12,
                  marginTop: -4,
                }}
                alt=""
              />
              <Typography variant="h6" color="rgba(255,255,255,0.8)" mr={2}>
                {data?.project_name}
              </Typography>
              <IconButton
                style={{ color: '#ffffff' }}
                size="small"
                onClick={() => {
                  setcollspan(!collspan);
                }}
              >
                {!collspan ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
              </IconButton>

              <IconButton
                style={{ color: '#ffffff' }}
                size="small"
                onClick={() => {
                  const path = localStorage.getItem(data?.project_name) ?? null;
                  setlocalPath(path);
                  getFileRoutes(path);
                  setactive(0);
                }}
              >
                <RedoOutlined />
              </IconButton>
            </div>
            <div
              className="center"
              style={{
                cursor: 'pointer',
                color: '#999999',
                alignItems: 'flex-end',
              }}
              onClick={() => {}}
            >
              {/* <Button
                startIcon={
                  <ArrowDownOutlined rotate={0} style={{ fontSize: 14 }} />
                }
              >
                拉取
              </Button>

              <Button
                style={{ marginRight: 12, marginLeft: 12 }}
                startIcon={
                  <ArrowDownOutlined rotate={180} style={{ fontSize: 14 }} />
                }
              >
                提交
              </Button> */}

              <LoadingButton
                loading={false}
                loadingPosition="start"
                style={{ color: '#ffffff' }}
                startIcon={<PlayCircleOutlined style={{ fontSize: 14 }} />}
                onClick={() => {
                  ipcRenderer.send('run_dev', localPath);
                }}
              >
                vscode
              </LoadingButton>
            </div>
          </div>
        </div>
        <Grid container spacing={2}>
          <Grid
            item
            style={{ width: collspan ? 100 : 480, transition: 'all 0.4s' }}
          >
            <Box
              sx={{
                bgcolor: '#444444',
                borderRadius: 3,
                overflow: 'hidden',
                padding: '24px',
                minHeight: `calc(100vh - 250px)`,
                background: `url(${require('@/renderer/assets/site.jpg')}) no-repeat center`,
                backgroundSize: 'cover',
                display: 'flex',
              }}
            >
              <div style={{ width: 36, height: 120 }}>
                <TabIcons
                  tablist={[
                    {
                      icon: 'icon-tv-full',
                      path: 'webdevloper',
                    },
                    {
                      icon: 'icon-wenjianjia',
                      path: '',
                    },
                  ]}
                  active={active}
                  setactive={(activekey) => {
                    setactive(activekey);
                  }}
                  column
                />
              </div>
              {!collspan ? (
                localPath && filelist ? (
                  <div
                    style={{
                      width: '100%',
                      height: `calc(100vh - 300px)`,
                    }}
                  >
                    <div
                      style={{
                        height: 36,
                        backgroundColor: '#1a1a1a',
                        marginLeft: 20,
                        borderRadius: 4,
                        marginBottom: 16,
                        justifyContent: 'space-between',
                      }}
                      className="centerl"
                    >
                      <Typography
                        color="rgba(255,255,255,0.8)"
                        ml={2}
                        fontSize={14}
                      >
                        {active == 0 ? '页面' : active == 1 ? '文件' : ''}
                      </Typography>
                      {active == 0 && filelist != 'error' && (
                        <IconButton
                          size="small"
                          style={{ color: 'lightblue', marginRight: 4 }}
                          onClick={() => {
                            // 新增
                            setmodal((s) => ({
                              ...s,
                              open: true,
                              title: `新增`,
                              curitem: null,
                            }));
                            setdefaultvalues({
                              name: '',
                              type: '1',
                              icon: '',
                              path: '',
                            });
                          }}
                        >
                          <PlusCircleFilled />
                        </IconButton>
                      )}
                    </div>
                    <div
                      style={{
                        height: `calc(100vh - 316px)`,
                        paddingLeft: 20,
                      }}
                    >
                      <Scrollbars
                        thumbMinSize={10}
                        autoHide
                        style={{
                          width: '100%',
                          height: '100%',
                        }}
                        hideTracksWhenNotNeeded
                      >
                        {filelist == 'error' && (
                          <span
                            className="center"
                            style={{
                              marginTop: 66,
                              fontWeight: 'lighter',
                              textAlign: 'center',
                              lineHeight: 1.5,
                            }}
                          >
                            页面结构暂不支持
                            <br />
                            请参考basepro项目
                          </span>
                        )}
                        <Tree
                          data={filelist}
                          curpage={curpage}
                          format={
                            active === 0
                              ? {
                                  title: 'name',
                                  key: 'path',
                                  children: 'routes',
                                }
                              : null
                          }
                          diybtn={
                            active === 0
                              ? {
                                  add: (item) => (
                                    <IconButton
                                      size="small"
                                      style={{
                                        color: 'lightblue',
                                      }}
                                      onClick={(e) => {
                                        e.stopPropagation();
                                        // 新增
                                        setmodal((s) => ({
                                          ...s,
                                          open: true,
                                          title: `新增`,
                                          curitem: item,
                                        }));
                                        setdefaultvalues({
                                          name: '',
                                          type: '1',
                                          icon: '',
                                          path: item.path
                                            ? item.path.slice(1)
                                            : null,
                                        });
                                      }}
                                    >
                                      <PlusCircleFilled />
                                    </IconButton>
                                  ),
                                  edit: (item) => (
                                    <IconButton
                                      size="small"
                                      style={{
                                        color: 'rgba(255, 255, 255, 0.5)',
                                      }}
                                      onClick={async (e) => {
                                        e.stopPropagation();
                                        setmodal((s) => ({
                                          ...s,
                                          open: true,
                                          title: `修改`,
                                          curitem: item,
                                        }));
                                        setdefaultvalues({
                                          ...item,
                                          path: item.path
                                            ? item.path.slice(1)
                                            : null,
                                        });
                                        // await setfilelist((s) => {
                                        //   const news =
                                        //     JSON.parse(JSON.stringify(s)) ??
                                        //     [];
                                        //     updateNodeInTree(news, item.path);
                                        //   filelists = news;
                                        //   return news;
                                        // });
                                      }}
                                    >
                                      <EditFilled />
                                    </IconButton>
                                  ),
                                  delete: (item) => (
                                    <IconButton
                                      size="small"
                                      style={{
                                        color: 'rgba(255, 186, 0, 0.5)',
                                      }}
                                      onClick={(e) => {
                                        e.stopPropagation();
                                        setpopover((s) => ({
                                          ...s,
                                          open: true,
                                          description:
                                            '删除页面将会删除配置以及页面关联的文件！',
                                          anchorEl: e.currentTarget,
                                          onOk: async () => {
                                            let filelists = [];
                                            await setpopover((s) => ({
                                              ...s,
                                              open: false,
                                            }));
                                            await setfilelist((s) => {
                                              const news =
                                                JSON.parse(JSON.stringify(s)) ??
                                                [];
                                              removeNodeInTree(news, item.path);
                                              filelists = news;
                                              return news;
                                            });
                                            const filestr = `export default ${JSON.stringify(
                                              filelists
                                            )};`;
                                            fs.writeFile(
                                              `${localPath}/config/authRoutes.js`,
                                              filestr,
                                              'utf-8',
                                              (err) => {}
                                            );
                                            // 删除路径下的所有文件
                                            delDir(
                                              `${localPath}/src/pages/${item.path}`
                                            );
                                            setcurpage({});
                                          },
                                        }));
                                      }}
                                    >
                                      <CloseCircleFilled />
                                    </IconButton>
                                  ),
                                }
                              : null
                          }
                          onSelect={(item) => {
                            if (active === 0) {
                              setcurpage(item);
                            } else if (active === 1) {
                              const val = item?.path;
                              const filearr = val.split('/');
                              const filename = filearr[filearr.length - 1];
                              if (filename.includes('.')) {
                                const filenamearr = filename.split('.');
                                const filetype =
                                  filenamearr[filenamearr.length - 1];
                                if (
                                  ['.jpg', '.png', '.svg', 'ico'].indexOf(
                                    filetype
                                  ) != -1
                                ) {
                                  setfiledata({
                                    name: filename,
                                    data: val,
                                    type: 'img',
                                  });
                                } else {
                                  fs.readFile(val, 'utf8', (err, data) => {
                                    if (err) {
                                      setfiledata(() => {
                                        return {
                                          name: filename,
                                          data: '不支持读取的文件',
                                          type: 'error',
                                        };
                                      });
                                      return;
                                    }
                                    setfiledata(() => {
                                      return {
                                        name: filename,
                                        data,
                                        type: 'file',
                                      };
                                    });
                                  });
                                }
                              } else {
                              }
                            }
                          }}
                        />
                      </Scrollbars>
                    </div>
                  </div>
                ) : (
                  <div
                    className="center"
                    style={{ width: '100%', height: 'calc(100vh - 300px)' }}
                  >
                    <Button
                      style={{
                        color: '#aaaaaa',
                        fontSize: 18,
                      }}
                      onClick={() => {
                        ipcRenderer.send('save_path', data);
                      }}
                    >
                      初始化项目
                    </Button>
                  </div>
                )
              ) : null}
            </Box>
          </Grid>
          <Grid item style={{ flex: 1, transition: 'all 0.4s' }}>
            <Box
              sx={{
                bgcolor: '#444444',
                borderRadius: 3,
                overflow: 'hidden',
                padding: '24px',
                height: `calc(100vh - 250px)`,
                backgroundSize: 'cover',
              }}
            >
              <Scrollbars
                thumbMinSize={10}
                autoHide
                style={{
                  width: '100%',
                  height: '100%',
                }}
                hideTracksWhenNotNeeded
              >
                {active === 0 ? (
                  <Editcroboard
                    prodata={data}
                    curitem={curpage}
                    localPath={localPath}
                    arg = {arg}
                  />
                ) : (
                  <code
                    style={{
                      whiteSpace: 'pre-wrap',
                      width: '100%',
                      height: '100%',
                      overflow: 'auto',
                      margin: 0,
                    }}
                  >
                    {filedata.data}
                  </code>
                )}
              </Scrollbars>
            </Box>
          </Grid>
        </Grid>
      </PhotoProvider>

      <Modal
        {...modalprops}
        onClose={() => {
          setmodal((s) => ({
            ...s,
            open: false,
          }));
        }}
        onOk={() => {
          // 页面数据是否存数据库
        }}
        footer={false}
      >
        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
          <Grid container spacing={2}>
            {modalprops?.title == '新增' && (
              <Grid item xs={12}>
                <RadioGroup row name="type" defaultValue={defaultvalues?.type}>
                  <FormControlLabel
                    control={<Radio value="1" color="primary" />}
                    label="页面"
                  />
                  <FormControlLabel
                    control={<Radio value="2" color="primary" />}
                    label="页面分组"
                  />
                </RadioGroup>
              </Grid>
            )}
            <Grid item xs={12} mt={2}>
              <TextField
                defaultValue={defaultvalues?.name}
                autoComplete="name"
                name="name"
                required
                fullWidth
                id="name"
                label="名称"
                autoFocus
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                defaultValue={defaultvalues?.path}
                required
                fullWidth
                id="path"
                label="路径"
                name="path"
                autoComplete="path"
              />
            </Grid>
            <Grid item xs={10}>
              <TextField
                defaultValue={defaultvalues?.icon}
                required
                fullWidth
                name="icon"
                label="图标"
                id="icon"
                autoComplete="icon"
              />
            </Grid>
            <Grid item xs={2} className="center">
              <Button
                style={{ color: '#999999', width: '100%', height: '100%' }}
                onClick={() => {
                  window.open(
                    'https://3x.ant.design/components/icon-cn/#%E5%9B%BE%E6%A0%87%E5%88%97%E8%A1%A8'
                  );
                }}
              >
                图标库
              </Button>
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            sx={{ mt: 3, mb: 2, bgcolor: '#666', color: '#ffffff' }}
            variant="contained"
            size="large"
          >
            确定
          </Button>
        </Box>
      </Modal>

      <Popover
        id={id}
        {...popover}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          horizontal: 'right',
        }}
      >
        <Typography sx={{ p: 2, backgroundColor: '#666666' }}>
          {popover?.description}
          <a
            style={{ color: '#ffffff', cursor: 'pointer' }}
            onClick={(e) => {
              popover?.onOk?.();
            }}
          >
            {popover?.oktext ?? '删除'}
          </a>
        </Typography>
      </Popover>
    </div>
  );
}

export default ProjectSetting;
